<template>
  <div :class="$style.background">
    <el-row>
      <el-col :span="24">
        <span :class="$style.margin">
          电话状态：
        </span>
        <el-select v-model="value" placeholder="请选择" size="small" style="width:100px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <span :class="$style.margin" style="cursor:default">
          在线时长：{{time.hours}}时{{time.minutes}}分{{time.seconds}}秒
        </span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { cookie } from 'vux'
export default {
  data() {
    return {
      options: [{
        value: '在线',
        label: '在线'
      }, {
        value: '暂离',
        label: '暂离'
      },{
        value: '培训',
        label: '培训'
      },{
        value: '开会',
        label: '开会'
      },
      {
        value: '就餐',
        label: '就餐'
      },
      {
        value: '离线',
        label: '离线'
      }
      
      ],
      value: '离线',
      time: {
        seconds: 0,
        minutes: 0,
        hours: 0,
      },
      setInterval: '',
      ws: '',
      setTimeout: '',
      isError: false
    }
  },
  computed: {
    wsdata () {
      return websocket.data
    },
    userInfo () {
      return this.$store.getters.getUserInfo
    },
    cuUserName(){
      return this.$store.getters.getUserInfo.userName
    }
  },
  watch: {
    cuUserName(val){
      this.getNowTime()
    },
    value: function (val) {
      sessionStorage.setItem("refresh", val);
      if(val === '在线') {
        if(websocket.state !== 1) {
            websocket.init(this.userInfo)
        } else {
          websocket.WsSend('online');
        }
        if (typeof this.setInterval === 'string') {
          this.getTime();
        }
        myws.cleartimeout();
        // this.isError = true;
      }
      if(val === '暂离' || val === '培训' || val === '开会' || val === '就餐') {
        // 不在线，直接暂离的话，就初始化，成功时，就在登录成功发送afk
        if(websocket.state !== 1) {
          websocket.init(this.userInfo);
        } else {
          websocket.WsSend('afk');
        }
        if (typeof this.setInterval === 'string') {
          this.getTime();
        }
        myws.cleartimeout();
        // this.isError = true;
      }
      if(val === '离线') {
        websocket.ws.close()
        this.clearInterval()
        this.setInterval = ''
        // myws的断线处理
        if(myws.state === 0){
          myws.init(this.userInfo)
        }
        myws.lx();
        // if (!this.isError) return false;
        setTimeout(()=>{
          myws.ws.send(`state0${this.userInfo.id}`);
        },3000)
      }
    },
    wsdata: function (data) {
      // 登录
      
      if(data.action == 'login') {
        if (data.result == '1') {
          if (this.value === '暂离' || this.value === '培训' || this.value === '开会' ||this.value ==='就餐') {
            websocket.WsSend('afk');
              setTimeout(()=>{
                if(this.value ==='暂离'){
                  myws.ws.send(`state2${this.userInfo.id}`);
                }else if(this.value ==='培训'){
                  myws.ws.send(`state3${this.userInfo.id}`);
                }else if(this.value ==='开会'){
                  myws.ws.send(`state4${this.userInfo.id}`);
                }else if(this.value==='就餐'){
                   myws.ws.send(`state5${this.userInfo.id}`);
                }
              },3000)
          } else {
            // myws的断线处理
            if(myws.state === 0){
              myws.init(this.userInfo)
            }
            setTimeout(()=>{
              myws.ws.send(`state1${this.userInfo.id}`);
            },3000)
            this.$toast({message: '在线成功'});
          }
          // 排队
          setTimeout(function() {
            websocket.WsSend('openqueues');
          }, 500);
        }
        if (data.result == '2') {
          this.$toast({message: '登录失败，帐号不存在'})
          this.isError = false;
          this.value = '离线'
        }
        if (data.result == '3') {
          this.$toast({message: '登录失败，密码错误'})
          this.isError = false;
          this.value = '离线'
        }
        if (data.result == '4') {
          this.$toast({message: '登录失败，帐号已登录'})
          this.isError = false;
          this.value = '离线'
        }
      }
      if(data.cmd == 'control') {
        // 摘机res
        if(data.action == 'pickup'){
          if (data.result == 0) {
            this.$toast({
              message: '摘机成功'
            })
            // this.show =false
          } else {
            this.$toast({
              message: '摘机失败'
            })
          }
        }
        // 挂机res
        // if (data.action === 'hangup') {
        //   if (data.result == 0) {
        //     this.$toast({
        //       message: '挂机成功'
        //     })
        //     // this.show =false
        //   } else {
        //     this.$toast({
        //       message: '挂机失败'
        //     })
        //   }
        // }
        // 在线res
        if (data.action === 'online') {
          if (data.result == 0) {
            this.$toast({
              message: '在线成功'
            })
            setTimeout(()=>{
              myws.ws.send(`state1${this.userInfo.id}`);
            },3000)
            // this.show =false
          } else {
            this.$toast({
              message: '在线失败'
            })
          }
        }
        // 暂离res
        
        if (data.action === 'afk') {
          if (data.result == 0) {
            this.$toast({
              message: '暂离成功'
            })
            // myws的断线处理
            if(myws.state === 0){
              myws.init(this.userInfo)
            }
            setTimeout(()=>{
                myws.ws.send(`state2${this.userInfo.id}`);
            },3000)
            // this.show =false
          } else {
            this.$toast({
              message: '暂离失败'
            })
          }
        }
      }
    }
  },
  methods: {
    getTime() {
      this.setInterval= setInterval(() => {
        this.time.seconds++
        if (this.time.seconds == 60) {
          this.time.seconds = 0;
          this.time.minutes++;
        }
        if (this.time.minutes == 60) {
          this.time.minutes = 0;
          this.time.hours++;
        }

      }, 1000)
    },
    clearInterval () {
      clearInterval(this.setInterval);
    },
    outLogin() {
      this.$confirm({
        message: '确认要退出吗',
        success: () => {
          this.$get(this, {
            api: 'user/tuiChu.do',
            data: {
              sessionId: this.userInfo.sessionId,
            }
          }).then(({ data }) => {
            if (data.state === 0) {
              cookie.remove('userInfo')
              this.$store.dispatch('outLogin')
              // 退出的时候，移除callMsg
              window.localStorage.removeItem('callMsg')
              //
              sessionStorage.removeItem("refresh")
              this.$router.replace('/')    // 退出登录时，回到首页
              location.reload()
            } else {
              this.$toast({
                message: "退出失败"
              })
            }
          })
        }
      })
    },
    // keepalive() {
    //   //每隔60秒将以保存的在线时间发送过去
    //   setInterval(() => {
    //     this.refresh()
    //   }, 60000)
    // },
    // refresh () {
    //   this.$get(this, {
    //     api: 'user/refresh.do',
    //     data: {
    //       sessionId: this.userInfo.sessionId,
    //       zxTime: `${this.time.hours}:${this.time.minutes}:${this.time.seconds}`
    //     },
    //     isLoading:false
    //   }).then(({ data }) => {
    //     if (data.state === 0) {

    //     } else {
    //       // this.$toast({
    //       //   message: data.message
    //       // })
    //     }
    //   })
    // },
    getNowTime () {
      // 获取在线时间
      this.$get(this, {
        api: 'user/getNowTime.do',
        data: {
          username: this.$store.getters.getUserInfo.userName,
        }
      }).then(({ data }) => {
        if (data.state === 0) {
          if (data.content) {
            var arr = data.content.split(':');
            this.time.hours = arr[0]
            this.time.minutes = arr[1]
            this.time.seconds = arr[2]
          }
        } else {
          this.$toast({
            message: data.message
          })
        }
      }).catch(e => {
        this.$warn('user/getNowTime.do:',e)
      })
    },
  },
  mounted() {
    // 初始时若为离线，则做离线处理
    if(this.value === '离线'){
      myws.lx()
      // setTimeout(() => {
      //   myws.ws.send(`state0${this.userInfo.id}`)
      // }, 3000)
    }
    this.getNowTime();
    // this.keepalive();
    if(sessionStorage.getItem("refresh")) {
      this.value = sessionStorage.getItem("refresh")
    }
  }
}
</script>
<style lang="scss" module>
.background {
  height: 60px;
  padding: 0 10px;
  line-height: 60px;
  overflow: hidden;
  box-sizing: border-box;
  background: #e9e9e9;
  border: 1px solid #444;
  border-radius: 5px;
  box-shadow: 0 1px 3px 2px #666;
  position: fixed;
  right: 0px;
  z-index: 10;
  font-size:14px;
}

.nav {
  overflow: hidden;
  li {
    float: left;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: background .3s;
  }
  li:hover {
    background: #404d66;
  }
  .active {
    background: #404d66;
  }
}

.margin {
  margin-left: 10px;
  cursor: pointer;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  img {
    float: left;
    width: 25px;
    margin-right: 5px;
  }
}

</style>

